<template>
	<view class="comment">
		<examine-nav title="评论审核专区" @rightClick="handlePopup" @leftClick="navLeftClick"></examine-nav>
		<view v-if="recode.length !== 0">
			<view class="content">
				<rules :number="examineNum + todayNum"></rules>
				<dynamic v-for="(item,index) in recode" :key="index" :dynamicDate="item.comment"></dynamic>
				<view class="box-pading origin">
					<view class="bold origin-title f-base">源帖内容</view>
					<view class="origin-detail">
						<view class="flex-no-horizontal m-b-10">
							<u--image :src="recode[0].article.avatar" class="m-r-5" shape="circle" width="40rpx"
								height="40rpx"></u--image>
							<view class="f-base origin-des">{{recode[0].article.username}}</view>
						</view>
						<view class="f-base origin-des m-b-20">{{recode[0].article.text}}</view>
						<view class="text-center f-base flex-no-horizontal look-more" @click="isShowOrigin = true">
							查看全部内容
							<u-icon name="arrow-right" size="14"></u-icon>
						</view>
					</view>
				</view>
				<view class="btn">
					<view class="btn-wrap">
						<btn @btnErrClick="btnErrClick" @btnSuccessClick="btnSuccessClick"></btn>
					</view>
				</view>
			</view>
		</view>
		<view class="empty" v-else>
			<view>
				<image src="../../static/empty/index-empty.png" mode=""></image>
			</view>
			<view>暂无审核</view>
		</view>

		<!-- 显示原贴 -->
		<u-popup :show="isShowOrigin" :round="10" :safeAreaInsetBottom="true" @close="isShowOrigin = false">
			<view class="origin-popup p-20" v-if="recode.length">
				<view class="flex-no-horizontal m-b-15">
					<u--image :src="recode[0].article.avatar" class="m-r-5" shape="circle" width="40rpx"
						height="40rpx"></u--image>
					<view class="f-large bold">{{recode[0].article.username}}</view>
				</view>
				<view class="f-15 m-b-20">{{recode[0].article.text}}</view>
				<!-- 图片部分 -->
				<view class="content-img-single" :class="{'content-img-multiple':imgs.length !== 1}" v-if="imgs.length">
					<image :src="item" :mode="imgs.length !== 1 ? 'aspectFill' : 'widthFix' " v-for="(item,index) in imgs"
						:key="index" @click="previewPhoto(index)"></image>
				</view>
				<view class="cancel">
					<view class="cancel-wrap text-center f-base" @click="isShowOrigin = false">取消</view>
				</view>
			</view>
		</u-popup>

		<!-- 结束审核弹窗 -->
		<tips-popup :show="isShowOver" :ifShowCancel="true" @btnSuccessClick="confirmOver"
			@btnErrClick="isShowOver = false">
			<view class="">
				<view class="text-center f-large m-b-20">
					本次审核{{examineNum}}条动态是否结束审核？
				</view>
				<view class="f-s text-center m-b-20">
					本次积累元石奖励：
					<text class="bold" style="color: #00B37A;">{{(examineNum * reward).toFixed(1)}}</text>
				</view>
				<view class="f-s text-center m-b-20">
					元石将在本月最后一日统一领取
				</view>
			</view>
		</tips-popup>

		<!-- 弹窗 -->
		<tipsPopup :show="tipsShow" :ifShowCancel="false" @btnSuccessClick="timeoutTipsConfirm">

			<view class="popup-text">
				{{tipsPopupText}}
			</view>

			<view class="popup-text-bottom" v-if="ifShowFrequency">
				目前剩余次数：
				<text>{{3 - examineInfo.count}}</text>
			</view>

			<view class="popup-text-bottom" v-else>
				「不良审核记录」
				<text>已超过三次</text>
				，取消您的审核员资格。
			</view>

		</tipsPopup>

		<!-- 不通过理由 -->
		<u-action-sheet :actions="failList" :title="failTitle" :show="failShow" :round="20" :cancelText="'取消'"
			@select="selectBanClick" @close="failHide" :closeOnClickAction="true"></u-action-sheet>

	</view>
</template>

<script>
	import examineNav from './common/examineNav.vue'
	import rules from './common/rules.vue'
	import dynamic from './common/dynamic.vue'
	import tipsPopup from './common/tipsPopup.vue'
	import btn from './common/btn.vue'
	import {
		examineCommentList
	} from '../../api/examine.js'
	import timeoutLogic from '../../common/mixin/threeTimeout.js'
	import {
		previewImage
	} from '../../utility/download.js'
	export default {
		components: {
			examineNav,
			rules,
			dynamic,
			tipsPopup,
			btn
		},
		mixins: [timeoutLogic],
		data() {
			return {
				isShowOver: false,
				recode: [],
				failShow: false, //封禁理由弹窗控制
				failList: [{
						name: '色情低俗',
						color: '#000',
						fontSize: '14'
					},
					{
						name: '垃圾广告',
						color: '#000',
						fontSize: '14'
					},
					{
						name: '攻击谩骂',
						color: '#000',
						fontSize: '14'
					},
					{
						name: '引战',
						color: '#000',
						fontSize: '14'
					},
					{
						name: '用户诱导、违规交易信息',
						color: '#000',
						fontSize: '14'
					},
					{
						name: '涉及政治政策风险',
						color: '#000',
						fontSize: '14'
					},
					{
						name: '信息灌水',
						color: '#000',
						fontSize: '14'
					},
					{
						name: '其他原因',
						color: '#000',
						fontSize: '14'
					}
				],
				failTitle: '请选择违规原因', //封禁弹窗title
				isShowOrigin: false
			}
		},
		computed: {
			imgs() {
				return this.recode[0].article.fileName === '' ? [] : this.recode[0].article.fileName.split(',')
			}
		},
		onLoad() {
			// this.getData()
		},
		methods: {

			async getData() {
				try {
					uni.showLoading({
						title: '',
						mask: true
					})
					const res = await examineCommentList()
					this.recode = res.data
					this.submitData.type = 'comment'
					this.submitData.id = res.data.length !== 0 ? res.data[0].id : 0
					uni.hideLoading()
					if (!res.data.length) {
						uni.showToast({
							title: '暂无数据，请结束审核',
							icon: 'none'
						})
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e)
					uni.hideLoading()
					uni.showToast({
						title: e.data || e.message,
						icon: 'none'
					})
				}
			},

			//封禁理由点击
			async selectBanClick(e) {
				try {
					this.submitData.isPass = 0
					this.submitData.notPassContent = e.name
					uni.$u.throttle(await this.submitFun, 500)
					this.submitData.content = ''
					this.submitData.notPassContent = ''
				} catch (e) {
					console.log(e)
					this.submitData.content = ''
					this.submitData.notPassContent = ''
					uni.showToast({
						title: e.message || e.data,
						icon: 'none'
					})
					//TODO handle the exception
				}
			},
			failHide() {
				this.failShow = !this.failShow
			},

			// 不通过点击
			btnErrClick() {
				this.failShow = !this.failShow
			},

			// 通过点击
			btnSuccessClick() {
				this.submitData.isPass = 1
				uni.$u.throttle(this.submitFun, 500)
			},

			handlePopup() {
				this.isShowOver = true
			},
			
			//预览图片
			previewPhoto(index) {
				uni.previewImage({
					urls: this.imgs,
					current: index
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn {
		height: 142rpx;

		.btn-wrap {
			padding: 30rpx 40rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			box-sizing: border-box;
			background-color: #ffffff;
		}
	}

	.empty {
		margin: 0 auto;
		margin-top: 200rpx;

		image {
			width: 418rpx;
			height: 308rpx;
		}

		view {
			margin-top: 10rpx;
			text-align: center;
			color: rgba(146, 146, 146, 1);
			font-size: 28rpx
		}
	}

	.comment {

		.content {
			padding-bottom: 30rpx;

			.origin {
				.origin-title {
					padding: 30rpx 0;
				}

				.origin-detail {
					background: #F7F7F7;
					border-radius: 10rpx;
					padding: 30rpx;

					.origin-des {
						color: #828282;
					}

					.look-more {
						justify-content: center;
					}
				}
			}
		}
	}

	.popup-text {
		color: rgba(0, 0, 0, 1);
		font-size: 26rpx;
		text-align: center;
		line-height: 50rpx;
	}

	.popup-text-bottom {
		color: rgba(0, 0, 0, 1);
		font-size: 26rpx;
		text-align: center;
		margin: 40rpx 0;

		text {
			color: rgba(235, 91, 51, 1);
		}
	}
	.origin-popup{
		height: 50vh;
		position: relative;
		overflow: hidden;
		overflow-y: scroll;
		.content-img-single {
			image {
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
			}
		}
		
		.content-img-multiple {
			display: flex;
			align-items: center;
			justify-content: left;
			flex-wrap: wrap;
		
			image {
				width: 33%;
				height: 189rpx;
				margin-left: 0.33%;
				margin-bottom: 20rpx;
			}
		
		}
		
		.cancel{
			height: 120rpx;
			.cancel-wrap{
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				padding: 40rpx;
				box-sizing: border-box;
				border-top: 1rpx solid rgba(23, 23, 23, 0.03);
				background-color: #ffffff;
			}
		}
	}
</style>
